<template>
  <el-card class="card">
    <!-- <page-container title="修改密码" style="font-size: 20px"> -->
      <el-row>
        <el-col :span="12" :offset="6">
          <el-form
            ref="formRef"
            :model="pwdForm"
            :rules="rules"
            label-width="100px"
            style="margin-top: 100px;"
          >
            <el-form-item label="原密码" prop="old_pwd">
              <el-input v-model="pwdForm.old_pwd" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="new_pwd">
              <el-input v-model="pwdForm.new_pwd" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="re_pwd">
              <el-input v-model="pwdForm.re_pwd" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                :size="$elementSize.value"
                type="primary"
                @click="submitForm"
                >修改</el-button
              >
              <el-button :size="$elementSize.value" @click="resetForm"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    <!-- </page-container> -->
  </el-card>
</template>
<!-- eslint-disable no-unused-vars -->
<script setup>
import { ref } from "vue";
import { userUpdatePasswordService } from "@/api/user";
import { useUserStore } from "@/stores";
import { useRouter } from "vue-router";
import sha256 from "crypto-js/sha256";
import { enc } from "crypto-js";
import crypto from "crypto-js";
import { ElMessage } from "element-plus";
const formRef = ref();
const pwdForm = ref({
  old_pwd: "",
  new_pwd: "",
  re_pwd: "",
});

const checkDifferent = (rule, value, callback) => {
  // 校验新密码和原密码不能一样
  if (value === pwdForm.value.old_pwd) {
    callback(new Error("新密码不能与原密码一样"));
  } else {
    callback();
  }
};
const checkSameAsNewPwd = (rule, value, callback) => {
  // 校验确认密码必须和新密码一样
  if (value !== pwdForm.value.new_pwd) {
    callback(new Error("确认密码必须和新密码一样"));
  } else {
    callback();
  }
};
const rules = ref({
  old_pwd: [
    { required: true, message: "请输入原密码", trigger: "blur" },
    { min: 6, max: 15, message: "原密码长度在6-15位之间", trigger: "blur" },
  ],
  new_pwd: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, max: 15, message: "新密码长度在6-15位之间", trigger: "blur" },
    { validator: checkDifferent, trigger: "blur" },
  ],
  re_pwd: [
    { required: true, message: "请再次输入新密码", trigger: "blur" },
    { min: 6, max: 15, message: "确认密码长度在6-15位之间", trigger: "blur" },
    { validator: checkSameAsNewPwd, trigger: "blur" },
  ],
});
import { useMiddleVarStore } from "@/stores";
const middleVarStore = useMiddleVarStore();
const userStore = useUserStore();
const router = useRouter();

const submitForm = async () => {
  await formRef.value.validate();
  let account = userStore.getAccount();
  let params = {
    account: account,
    old_pwd: crypto.MD5(pwdForm.value.old_pwd).toString(enc.Hex),
    new_pwd: crypto.MD5(pwdForm.value.new_pwd).toString(enc.Hex),
  };
  let res = await userUpdatePasswordService(params);
  if (res.data.code == 200) {
    ElMessage.success("密码修改成功");
    // 清除本地的数据 (token + user信息)
    userStore.removeToken();
    userStore.removeRole();
    userStore.removeUser();
    router.removeRoute("Home"); // 移除动态路由
    userStore.setUserName("未登录");
      // router.push("/login");
    middleVarStore.setLoginOpen(true)
  } else {
    ElMessage.error(res.data.msg);
  }

  // 密码修改成功后，退出重新登录
  // 清空本地存储的 token 和 个人信息
  // userStore.removeToken()
  // userStore.removeUser()

  // // 拦截登录
  // router.push('/login')
};

const resetForm = () => {
  formRef.value.resetFields();
};
</script>

<style scoped>
@media (max-width: 768px) {
  /* 手机样式 */
  .el-button,
  .body.page-container {
    font-size: 10px;
  }
  .el-input {
    font-size: 10px;
    width: 100px;
  }
}

@media (min-width: 769px) {
  /* 电脑样式 */
  .el-button,
  .body,
  .page-container {
    font-size: 14px;
  }
  .el-input {
    font-size: 14px;
    width: 300px;
  }
}
</style>
